<template>
    <div class="content">
        <div id="cart-title">
            购物车
        </div>
        <br>
        <div>
    
            <el-table :data="cartGoods"
                      stripe
                      style="width: 100%">
                <el-table-column prop="Image"
                                 label="商品"
                                 width="180"
                                 inline-template>
                    <img :src="row.Image"
                         class="cart-img">
                </el-table-column>
                <el-table-column prop="GoodsName"
                                 label="名称"
                                 width="180">
                </el-table-column>
                <el-table-column prop="Number"
                                 label="数量">
                </el-table-column>
                <el-table-column prop="Price"
                                 label="金额">
                </el-table-column>
                <el-table-column prop="GoodsId"
                                 label="删除"
                                 inline-template>
                    <i class="el-icon-delete"
                       @click="deleteGoods(row.GoodsId)"></i>
                </el-table-column>
            </el-table>
    
            <div class="cart-sure">
                <p>商品总价：￥{{total}}</p>
                <p>邮费：￥0</p>
                <p>数量：{{totalNumber}}</p>
                <p class="cart-totle">总金额：￥{{total}}</p>
            </div>
            <a href="http://localhost:60861/#/Index">
                <el-button class="cart-button-continue"
                           type="primary"
                           size="large">&nbsp;&nbsp;继续购买&nbsp;&nbsp;</el-button>
            </a>
            <el-button class="cart-button"
                       type="primary"
                       size="large"
                       @click="dialogVisible = true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;继续&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
            <el-dialog title="默认地址"
                       v-model="dialogVisible"
                       size="tiny">
                <p class="cart-p">收货人：{{deliveryInfo.Consignee}}</p>
                <p class="cart-p">联系电话：{{deliveryInfo.PhoneNumber}}</p>
                <p class="cart-p">收货地址：{{deliveryInfo.DetailedAddress}}</p>
                <span slot="footer"
                      class="dialog-footer">
                                                                                            <el-button @click="dialogVisible = false">修 改</el-button>
                                                                                            <el-button type="primary" @click="submitOrder()">确 定</el-button>
                                                                                          </span>
            </el-dialog>
        </div>
    </div>
</template>
<style>
.el-table {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    background-color: #fff;
    border: 1px solid gainsboro;
    font-size: 14px;
    color: rgb(61, 34, 31);
}

.el-table--enable-row-hover tr:hover>td {
    background-color: white;
}

.el-table th {
    overflow: hidden;
    background-color: black;
    text-align: left;
}

.el-table__fixed-header-wrapper thead div,
.el-table__header-wrapper thead div {
    color: white;
    background-color: black;
}

#cart-title {
    margin-top: 1.5%;
    padding-bottom: 2.5%;
    font-weight: 900;
    border-bottom: 1px dashed #000;
    font-size: 1.5em;
}

.cart-content {
    margin-top: 1.5%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.cart-img {
    width: 25%;
    height: 30%;
}

.cart-sure {
    width: 100%;
    min-height: 55%;
    background-color: #f8f8f8;
    margin-top: 5%;
    border-top: 1px dashed #000;
    border-bottom: 1px solid #000;
    text-align: right;
    font-size: 0.8em;
    padding-right: 0.5%;
}

.cart-sure p {
    margin: 0.8%;
}

.cart-totle {
    font-size: 1.5em;
    font-weight: 900;
}

.cart-button {
    margin-top: 1%;
    float: right;
}

.cart-button-continue {
    margin-top: 1%;
}

.cart-p {
    font-weight: 900;
    text-align: right;
}
</style>
<script>
export default {
    data: function () {
        return {
            cartGoods: [],
            total: 0,
            totalNumber: 0,
            dialogVisible: false,
            deliveryInfo: {},
        }
    },
    mounted: function () {
        var _this = this;
        if ($.cookie('front-token') == null) {
            window.location.href = 'http://localhost:60861/#/Login'
        } else {
            getgGoodsInfo: {
                var token = JSON.parse($.cookie('front-token'));
                $.ajax({
                    type: "Get",
                    url: "/api/Goods/GetGoodsInfoByUserId",
                    headers: {
                        Authorization: "Bearer " + token.access_token
                    },
                    data: {
                        "userId": _this.$store.state.user.userId
                    },
                    contentType: "application/json",
                    dataType: "json",
                    success: function (data) {
                        _this.cartGoods = data;
                        data.map(item => {
                            _this.total += item.Price * item.Number;
                            _this.totalNumber += item.Number;
                        });
                    },
                    error: function (msg) {
                        alert(msg);
                    }
                });
                $.ajax({
                    type: "Get",
                    url: "/api/Goods/GetClientDeliveryInfo",
                    headers: {
                        Authorization: "Bearer " + token.access_token
                    },
                    contentType: "application/json",
                    dataType: "json",
                    success: function (data) {
                        if (data != null) {
                            _this.deliveryInfo = data;
                        } else {
                            _this.orderFailed("请先在购物之前添加一个收获地址！");
                            window.location.href = 'http://localhost:60861/#/PersonalCenter/AddressBook';
                        }

                    },
                    error: function (msg) {
                        alert(msg);
                    }
                });
            }
        }
    },
    methods: {
        submitOrder() {
            var _this = this;
            var token = JSON.parse($.cookie('front-token'));
            $.ajax({
                type: "Put",
                url: "/api/Order/ConfirmOrder",
                data: {
                    UserId: _this.$store.state.user.userId,
                    Consignee: _this.deliveryInfo.Consignee + "",
                    DetailedAddress: _this.deliveryInfo.DetailedAddress + "",
                    PhoneNumber: _this.deliveryInfo.PhoneNumber + "",
                    Goods: _this.cartGoods
                },
                headers: {
                    Authorization: "Bearer " + token.access_token
                },
                dataType: "json",
                success: function (data) {
                    if (data != "OK") {
                        _this.orderFailed("下单失败");
                    } else {
                        _this.orderSuccess("下单成功");
                        setTimeout("window.location.href = 'http://localhost:60861/#/PaymentOrder'", 1000);
                    }
                },
                error: function (msg) {
                    alert(msg);
                }
            });
        },
        deleteGoods(id) {
            var _this = this;
            var token = JSON.parse($.cookie('front-token'));
            $.ajax({
                type: "Delete",
                url: "/api/Goods/DeleteGoodsFromCart",
                data: JSON.stringify({
                    userId: _this.$store.state.user.userId,
                    goodsId: id
                }),
                headers: {
                    Authorization: "Bearer " + token.access_token
                },
                contentType: "application/json",
                dataType: "json",
                success: function (data) {
                    _this.cartGoods = data;
                    _this.total = 0;
                    _this.totalNumber = 0;
                    data.map(item => {
                        _this.total += item.Price * item.Number;
                        _this.totalNumber += item.Number;
                    });
                },
                error: function (msg) {
                    alert(msg);
                }
            });
        },
        orderSuccess(mes) {
            this.$message({
                showClose: true,
                message: mes,
                type: 'success'
            });
        },
        orderFailed(mes) {
            this.$message({
                showClose: true,
                message: mes,
                type: 'error'
            });
        }
    }
}
</script>